import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import { Button, Toast } from 'antd-mobile'
import Avatar from '@/components/Avatar'
import ResponsiveImage from '@/components/ResponsiveImage'
import Popup from '@/components/Popup'
import css from './info.module.scss'
import Backgroud from '@/assets/images/topic.jpg'
import { formatNumber } from '@/utils'
class TopicInfo extends PureComponent {
    
    popupRef = React.createRef()

    static propTypes = {
        info: PropTypes.object,
        infoCount: PropTypes.object
    }

    get title() {
        return this.props.info?.tag_name ?? ''
    }

    get view() {
        return this.props.infoCount?.view_count ?? 0
    }

    get discuss() {
        return this.props.infoCount?.discuss_count ?? 0
    }

    get activeUsers() {
        return this.props.infoCount?.active_users ?? []
    }

    handleSubscribe = () => {
        Toast.info('功能待开发', 3)
    }
    handlePopup = () => {
        this.popupRef.current?.show()
    }

    handleSpace = mid => {
        this.props.history.push(`/space/${mid}`)
    }

    render() {
        return (
            <div className={css["wrap"]}>
                <ResponsiveImage className={css["banner"]} src={Backgroud} webp={false} size="" />
                <div className="main">
                    <div className="head">
                        <div className="title">{ this.title }</div>
                        <Button className="subscribe" size="small" onClick={this.handleSubscribe}><i className="fa fa-plus"></i> 订阅</Button>
                    </div>
                    <div className="body">
                        <em>{ formatNumber(this.view) }</em>浏览<em>{ formatNumber(this.discuss) }</em>讨论
                    </div>                                   
                </div>
                {
                    this.activeUsers.length > 0 &&  
                        <div className="foot">
                            <div className="list">
                                {
                                    this.activeUsers.slice(0, 5).map(item => {
                                        return (
                                            <Avatar 
                                                className="face"
                                                key={item.user_info.uid} 
                                                src={item.user_info.face} 
                                                vip={item.user_info.vip.vipStatus} 
                                                offical={item.user_info.official_verify} 
                                                size="small" 
                                                onClick={() => this.handleSpace(item.user_info.uid)}
                                            />
                                        )
                                    })
                                }
                            </div>
                            <span className="more" onClick={this.handlePopup}>更多活跃用户<i className="fa fa-dropdown"></i></span>
                        </div>
                }

                <Popup ref={this.popupRef} className={css["user-popup"]} title="更多活跃用户">
                    <ul className={css["user-list"]}>
                        {
                            this.activeUsers.map(item => {
                                return (
                                    <li key={item.user_info.uid} onClick={() => this.handleSpace(item.user_info.uid)}>
                                        <Avatar 
                                            className="face"
                                            src={item.user_info.face} 
                                            vip={item.user_info.vip.vipStatus} 
                                            offical={item.user_info.official_verify} 
                                            size="small" 
                                        />
                                        <span className="name">{ item.user_info.uname }</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </Popup>
            </div>
        )
    }
}

export default withRouter(TopicInfo)